@import '../../styles/variables';
@import '../../styles/mixins/breakpoints';
@import '../../styles/mixins/typography';

.home {
  $block: 'home';

  display: flex;
  flex-wrap: wrap;

  > p {
    flex: 0 0 100%;
    @include long-text;
  }

  &__link {
    flex: 0 0 400px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 2rem 2rem 1rem 0;
    padding: 0.3rem;
    color: var(--color-text);
    border-radius: 4px;

    &:hover {
      background: var(--color-content-background-hover);
    }
  }

  &__header {
    flex: 0 0 100%;
    margin-right: 1rem;

    img {
      max-width: 150px;
      max-height: 70px;
      display: block;
      background: var(--color-black);
      margin-bottom: 1rem;
    }
  }

  &__content {
    flex: 0 1 auto;
  }

  &__title {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 0;
    border-bottom: 1px solid black;
    max-width: 240px;
  }

  @include media-breakpoint-up(md) {
    &__link {
      flex-wrap: nowrap;
    }

    &__header {
      flex: 0 0 150px;
    }
  }
}
